// 1.下载并引入vue-router
import VueRouter from "vue-router"
import Vue from "vue"
import Home from "@/pages/Home"
import Login from "@/pages/Login"
import News from "@/pages/Home/News"
import Music from "@/pages/Home/Music"
import Game from "@/pages//Home/Game"
import NotFound from "@/pages/NotFound"

// 2.应用路由插件
Vue.use(VueRouter)


// 3.创建路由器对象，并在内部配置模式和路由表
const router = new VueRouter({
    mode: "history",
    /* 
      每一个对象都是一个路由规则，我们可以给路由规则一个名字，方便后边使用
    */
    routes: [{
        path: "/",
        redirect: "/home"
    }, {
        path: "/home",
        component: Home,

        // 默认子路由写法3：重定向
        redirect:"/home/news",

        /* 
           如果某个路由拥有了默认子路由，我们一般不会在这个路由上命名
        */
        // name: "Home",
        // 二级路由配置
        children: [
            // 默认子路由写法1：重定向，推荐写法
            /* {
                path: "",
                redirect: "/home/news"
            }, */
            // 默认子路由写法2：直接定向设置组件写法
            /* {
                path: "",
                component:News,
            },  */
            {
                /* 
                   二级路由的路径可以直接书写二级路由的路由名称即可，不用书写完整的地址
                   但是不能写 /+当前路由地址！！！！！！！！！！！！！
                */
                path: "/home/news",
                component: News,
                name: "News"
            }, {
                path: "/home/music",
                component: Music,
                name: "Music"
            }, {
                path: "/home/game",
                component: Game,
                name: "Game"
            }
        ]
    }, {
        path: "/login",
        component: Login,
        name: "Login"
    }, {
        path: "/*",
        component: NotFound,
    }]
})

// 4.暴露
export default router